<!-- 容器模块 -->
<section id="<?= $data['type'] ?? 'containers' ?>" class="py-<?= $data['styles']['padding']['top'] ?? 16 ?> py-b-<?= $data['styles']['padding']['bottom'] ?? 16 ?>" style="background-color: <?= $data['styles']['backgroundColor'] ?? 'white' ?>">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8" style="max-width: <?= $data['styles']['containerMaxWidth'] ?? '1200px' ?>; margin: <?= $data['styles']['margin'] ?? '0 auto' ?>">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <?php if (isset($data['content']['sectionBadge'])): ?>
        <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
          <?= $data['content']['sectionBadge'] ?>
        </div>
      <?php endif; ?>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $data['content']['sectionTitle'] ?? '多样化的内容容器' ?>
      </h2>
      <p class="text-dark/70">
        <?= $data['content']['sectionSubtitle'] ?? '我们提供多种不同类型的内容容器，满足您的各种展示需求' ?>
      </p>
    </div>
    
    <div class="max-w-4xl mx-auto space-y-8">
      <?php if (isset($data['content']['containers']) && is_array($data['content']['containers'])): ?>
        <?php foreach ($data['content']['containers'] as $container): ?>
          <?php if ($container['type'] == 'basic'): ?>
            <!-- 基础信息容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#f9fafb' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4"><?= $container['title'] ?></h3>
              <p class="text-dark/70">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'info'): ?>
            <!-- 重要提示容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#e6f7ff' ?>; border-left-width: <?= $container['styles']['borderLeftWidth'] ?? 4 ?>px; border-left-color: <?= $container['styles']['borderLeftColor'] ?? '#1890ff' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-<?= $container['icon'] ?? 'info-circle' ?> text-primary mr-2"></i>
                <?= $container['title'] ?>
              </h3>
              <p class="text-dark/70">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'success'): ?>
            <!-- 成功状态容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#f6ffed' ?>; border-left-width: <?= $container['styles']['borderLeftWidth'] ?? 4 ?>px; border-left-color: <?= $container['styles']['borderLeftColor'] ?? '#52c41a' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-<?= $container['icon'] ?? 'check-circle' ?> text-green-500 mr-2"></i>
                <?= $container['title'] ?>
              </h3>
              <p class="text-dark/70">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'warning'): ?>
            <!-- 警告提示容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#fffbe6' ?>; border-left-width: <?= $container['styles']['borderLeftWidth'] ?? 4 ?>px; border-left-color: <?= $container['styles']['borderLeftColor'] ?? '#faad14' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-<?= $container['icon'] ?? 'exclamation-triangle' ?> text-yellow-500 mr-2"></i>
                <?= $container['title'] ?>
              </h3>
              <p class="text-dark/70">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'error'): ?>
            <!-- 错误提示容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#fff2f0' ?>; border-left-width: <?= $container['styles']['borderLeftWidth'] ?? 4 ?>px; border-left-color: <?= $container['styles']['borderLeftColor'] ?? '#f5222d' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4 flex items-center">
                <i class="fa fa-<?= $container['icon'] ?? 'times-circle' ?> text-red-500 mr-2"></i>
                <?= $container['title'] ?>
              </h3>
              <p class="text-dark/70">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'image'): ?>
            <!-- 图片容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#f9fafb' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px; overflow: hidden;">
              <h3 class="text-lg font-bold mb-4"><?= $container['title'] ?></h3>
              <div class="grid grid-cols-1 md:grid-cols-<?= $container['imageColumns'] ?? 2 ?> gap-4 mb-4">
                <?php foreach ($container['images'] as $image): ?>
                  <img src="<?= $image['src'] ?>" alt="<?= $image['alt'] ?>" class="w-full h-auto rounded-lg">
                <?php endforeach; ?>
              </div>
              <p class="text-dark/70 text-sm text-center">
                <?= $container['description'] ?>
              </p>
            </div>
          
          <?php elseif ($container['type'] == 'image-text'): ?>
            <!-- 图文内容容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? '#f9fafb' ?>; padding: <?= $container['styles']['padding'] ?? 24 ?>px; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px;">
              <h3 class="text-lg font-bold mb-4"><?= $container['title'] ?></h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
                <div class="md:col-span-1">
                  <img src="<?= $container['image']['src'] ?>" alt="<?= $container['image']['alt'] ?>" class="w-full h-auto rounded-lg">
                </div>
                <div class="md:col-span-2">
                  <h4 class="font-bold mb-2"><?= $container['subtitle'] ?></h4>
                  <p class="text-dark/70 mb-4">
                    <?= $container['description'] ?>
                  </p>
                  <?php if (isset($container['ctaButton'])): ?>
                    <a href="<?= $container['ctaButton']['url'] ?? '#' ?>" class="text-primary hover:underline">
                      <?= $container['ctaButton']['text'] ?>
                      <?php if (isset($container['ctaButton']['icon'])): ?>
                        <i class="fa fa-<?= $container['ctaButton']['icon'] ?> ml-1"></i>
                      <?php endif; ?>
                    </a>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          
          <?php elseif ($container['type'] == 'stats'): ?>
            <!-- 数据统计容器 -->
            <div id="<?= $container['id'] ?? '' ?>" style="background-color: <?= $container['styles']['backgroundColor'] ?? 'white' ?>; border: <?= $container['styles']['border'] ?? '1px solid #e5e7eb' ?>; border-radius: <?= $container['styles']['borderRadius'] ?? 12 ?>px; box-shadow: <?= $container['styles']['boxShadow'] ?? '0 4px 6px -1px rgba(0,0,0,0.1)' ?>; overflow: hidden;">
              <div style="padding: <?= $container['styles']['padding'] ?? 24 ?>px;">
                <h3 class="text-lg font-bold mb-6"><?= $container['title'] ?></h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <?php foreach ($container['statsItems'] as $item): ?>
                    <div class="text-center p-4 bg-light rounded-lg">
                      <div class="text-3xl font-bold text-primary mb-1"><?= $item['value'] ?></div>
                      <div class="text-dark/70 text-sm"><?= $item['label'] ?></div>
                    </div>
                  <?php endforeach; ?>
                </div>
              </div>
            </div>
          <?php endif; ?>
        <?php endforeach; ?>
      <?php endif; ?>
    </div>
  </div>
</section>